<template>
	<view class="all">
		<view class="pic">
			<view class="line1">
				<view class="">
					总收入
				</view>
				<view class="">
					0.00
				</view>
			</view>
			<view class="line2">
				<view class="top">
					<view class="">
						可提现金额
					</view>
				</view>
				<view class="bottom">
					<view class="num">
						0.00
					</view>
					<view class="btn" @click="toWithdraw()">
						提现
					</view>
				</view>
			</view>
		</view>
		<view class="detial">
			<view class="title">
				全部明细
			</view>
			<view class="content" v-if="arr.length">
				<view class="item" v-for="(item,index) in arr" :key="index">
					<view class="line1">
						订单支付
					</view>
					<view class="line2">
						<view class="left">
							流水单号：QB20230406113600005
						</view>
						<view class="right">
							+6000
						</view>
					</view>
					<view class="line3">
						时间：2023.04.06 12:00
					</view>
					<view class="" v-if="!(index==arr.length-1)" style="margin-bottom: 30rpx;">
						<u-line></u-line>
					</view>
				</view>
			</view>
			<view class="content2" v-else>
				<view class="img">
					<image style="width: 374rpx;height: 270rpx;" src="/static/img/no_list (1).png" mode=""></image>
				</view>
				<view class="text">
					暂无明细
				</view>
					
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:[]
			};
		},
		methods:{
			toWithdraw(){
				uni.navigateTo({
					url:'/pages/my/myWallet/Withdraw'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.all{
	padding: 48rpx 24rpx;
	.pic{
		background-image:url('@/static/img/wallet_img_bg.png');
		background-size: cover;
		border-radius: 16rpx;
		height: 320rpx;
		padding: 39rpx;
		.line1 :first-child{
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
		.line1 :last-child{
			font-size: 72rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-shadow: 0rpx 15rpx 22rpx rgba(37,105,255,0.1);
		}
		.line2{
			margin-top: 40rpx;
			.top :first-child{
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
			.bottom{
				// margin-top: 19rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.num{
					font-size: 72rpx;
					font-weight: 500;
					color: #FFFFFF;
					text-shadow: 0px 15rpx 22rpx rgba(37,105,255,0.1);
				}
				.btn{
					width: 180rpx;
					height: 70rpx;
					background: #FFFFFF;
					border-radius: 35rpx;
					line-height: 70rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: 500;
					color: #5398F6;
					// margin-top: ;
				}
			}
		}
	}
	.detial{
		margin-top: 20rpx;
		.title{
			padding: 0 16rpx;
			font-size: 40rpx;
			font-weight: bold;
			color: #242424;
		}
		.content{
			margin-top: 31rpx;
			padding: 40rpx 24rpx;
			background-color: #FFFFFF;
			.item{
				.line1{
					font-size: 32rpx;
					font-weight: bold;
					color: #242424;
				}
				.line2{
					margin-top: 19rpx;
					display: flex;
					justify-content: space-between;
					.left{
						
						font-size: 24rpx;
						font-weight: 500;
						color: #868686;
					}
					.right{
						font-size: 32rpx;
						font-weight: bold;
						color: #E82828;
					}
				}
				.line3{
					margin-top: 19rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #868686;
					margin-bottom: 31rpx;
				}
			}
		}
		.content2{
			margin-top: 31rpx;
			padding: 40rpx 24rpx;
			background-color: #FFFFFF;
			height: 657rpx;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.img{
				width: 374rpx;
				height: 270rpx;
			}
			.text{
				font-size: 30rpx;
				font-weight: 500;
				color: #868686;
			}
		}
	}
}
</style>
